<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Order Status Check</title>
		<img src="https://wenhairu.com/static/api/qr/?size=300&text=<?php echo $code_url;?>" style="width:300px;">
		<script>
			// 定时查询订单状态的间隔时间（毫秒）
			const CHECK_STATUS_INTERVAL = 5000;

			// 支付超时时间（毫秒）
			const PAYMENT_TIMEOUT = 180000;

			// 查询订单状态的URL
			const QUERY_STATUS_URL = 'query.php?out_trade_no=<?php echo $out_trade_no;?>';

			// 关闭订单的URL
			const CLOSE_ORDER_URL = 'closeorder.php?out_trade_no=<?php echo $out_trade_no;?>';

			// 获取元素的ID
			const ORDER_STATUS_ELEMENT_ID = 'orderStatus';

			// 定时器ID
			let statusCheckIntervalId;
			let paymentTimeoutId;

			// 发送AJAX请求的函数
			function sendRequest(method, url, callback) {
				var xhr = new XMLHttpRequest();
				xhr.open(method, url, true);
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4) {
						if (xhr.status == 200) {
							var response = JSON.parse(xhr.responseText);
							callback(response);
						} else {
							// 处理错误情况
							console.error('Error:', xhr.statusText);
						}
					}
				};
				xhr.send();
			}

			// 查询订单状态
			function checkOrderStatus() {
				sendRequest('GET', QUERY_STATUS_URL, function(response) {
					// 检查订单是否支付成功
					if (response.status === 'success') {
						// 支付成功，清除定时器
						clearInterval(statusCheckIntervalId);
						clearTimeout(paymentTimeoutId);
						document.getElementById(ORDER_STATUS_ELEMENT_ID).innerText = '支付成功';
					} else if (response.status === 'error') {
						document.getElementById(ORDER_STATUS_ELEMENT_ID).innerText = response.trade_state_desc;
					} else {
						// 处理返回的订单状态
						document.getElementById(ORDER_STATUS_ELEMENT_ID).innerText = response.trade_state_desc;
					}
				});
			}

			// 处理支付超时
			function handlePaymentTimeout() {
				// 关闭定时器
				clearInterval(statusCheckIntervalId);

				sendRequest('GET', CLOSE_ORDER_URL, function(response) {
					if (response.return_code === 'success') {
						document.getElementById(ORDER_STATUS_ELEMENT_ID).innerText = '支付超时，订单已关闭';
					}
				});
			}
			
			// 页面加载完成后启动定时器
			window.onload = function() {
				// 设置定时查询订单状态的定时器
				statusCheckIntervalId = setInterval(checkOrderStatus, CHECK_STATUS_INTERVAL);

				// 设置支付超时的定时器
				paymentTimeoutId = setTimeout(handlePaymentTimeout, PAYMENT_TIMEOUT);
			};
		</script>
	</head>
	<body>
		<div>Order Status: <span id="orderStatus"></span></div>
	</body>
</html>